(DIV 就是在純白的網頁裡，切一個區塊出來，然後可以透過CSS指定位置跟大小，接著我們可以在DIV裡面，放進我們想要的內容，像我們的網站一樣。我們網頁的「選單Menu」部份，就是這一段程式碼...)

(然後呢，這些DIV 都有定義Class，Class是幹嘛用的呢? 我們有使用DIV這個tag，接著希望經由CSS，來對DIV做點變化或定義，因此就必需在HTML的部份，宣告這個DIV是屬於那些Class，接著瀏覽器會依據CSS裡面的內容，顯示給我們看，整個配合的程序，大概是像這樣)

<這我知道...那你說的...Class，能用簡單的例子嗎?>

(喳! 娘娘請看這個範例...小的用了兩個h1, 然後因為CSS那邊有宣告h1，所以顯非示結果就為粗體、藍色、跟30大小的字體。)

<那...如果我希望都是h1, 但要有不同的顏色時怎辦?>

(報告娘娘...這個時候，可以用Class處理。請娘娘看下一張圖...)

<你在HTML 裡面的h1, 還有class裡面的red, green，對應到CSS裡面設定的h1 h1.red .green 這三個設定，然後你的p 也用了green 這個class，原來是這樣，那DIV呢? DIV用了Class 會變成什麼樣子?>

(DIV加Class哦...來看看吧!)

<我看看...你建了三個DIV，Class分別為...top, mid, flo，然後...三個class用了不同的屬性定義，原來是這樣啊，那我大概看懂了。DIV 跟Class的關係...不過，我看你的網頁碼裡面，好像有Class="a b c" 這又是什麼意思?

(那個是多重Class，晚點再跟妳解釋。)

<哦...為什麼又要晚點?>

(妳不是說要買便當給我吃?)

<我什麼時候...Allen 我什麼時候說要買便給妳吃?>

(剛剛我喊妳娘娘的時候，妳不是有回話?)

<是啊，我是有...然後呢?>

(然後，妳不是說要買便當給我吃?) Allen 手再次指著電腦螢幕...

<可是，那個是你範例裡面的對話耶，這樣也算哦。>

(算啊，我是妳的HTML，妳是我的CSS...我喊妳娘娘，妳的CSS裡面還特別用黑色框線標起來，說要買便當給我ㄤ。是吧!)

<A工程師，我告訴你...今天開始，你不準吃便當! 不準吃早午餐! 不準再這樣欺負我，聽到沒...>

Allen點了點頭，起身...準備出門...Maggie 問他<你要去那?>

(妳不是要吃早午餐，我帶妳去吃啊!)

<哦，好...那我也準備一下....>

(還說我不是你ㄤ...我先去外面等妳啊!)

Maggie在心裡直唸...<你給我記住，將來我一定加倍奉還!>

(待)

2014/10/08 SunAllen
現任：太陽數位文創(技術總監)_彩虹53_小鐵道民宿(管家)